<template>
  <div class="main-layout">
    <el-container>
      <el-aside :width="isCollapse ? '64px' : '220px'" class="aside-container">
        <div class="logo-container" @click="goToHome">
          <img src="../assets/logo.png" alt="Smart Park" class="logo-img" />
          <span v-show="!isCollapse" class="logo-text">智慧停车系统</span>
        </div>
        
        <el-scrollbar>
          <el-menu
            :default-active="activeMenu"
            class="el-menu-vertical"
            :collapse="isCollapse"
            :collapse-transition="false"
            background-color="#304156"
            text-color="#bfcbd9"
            active-text-color="#409EFF"
            router
          >
            <sidebar-item v-for="route in routes" :key="route.path" :item="route" :base-path="route.path" />
          </el-menu>
        </el-scrollbar>
      </el-aside>
      
      <el-container>
        <el-header height="60px" class="header-container">
          <div class="header-left">
            <el-icon class="toggle-button" @click="toggleSidebar">
              <component :is="isCollapse ? 'Expand' : 'Fold'" />
            </el-icon>
            <breadcrumb />
          </div>
          
          <div class="header-right">
            <el-tooltip
              effect="dark"
              :content="isFullscreen ? '退出全屏' : '全屏'"
              placement="bottom"
            >
              <el-icon class="header-icon" @click="toggleFullScreen">
                <component :is="isFullscreen ? 'Close' : 'FullScreen'" />
              </el-icon>
            </el-tooltip>
            
            <el-dropdown @command="handleCommand" trigger="click">
              <div class="avatar-container">
                <el-avatar :size="32" :src="AppConfig.defaultAvatar" />
                <span class="username">{{ userInfo.username }}</span>
                <el-icon><ArrowDown /></el-icon>
              </div>
              <template #dropdown>
                <el-dropdown-menu>
                  <el-dropdown-item command="profile">
                    <el-icon><User /></el-icon>个人资料
                  </el-dropdown-item>
                  <el-dropdown-item command="setting">
                    <el-icon><Setting /></el-icon>账号设置
                  </el-dropdown-item>
                  <el-dropdown-item divided command="logout">
                    <el-icon><SwitchButton /></el-icon>退出登录
                  </el-dropdown-item>
                </el-dropdown-menu>
              </template>
            </el-dropdown>
          </div>
        </el-header>
        
        <el-main class="main-container">
          <router-view v-slot="{ Component }">
            <transition name="fade-transform" mode="out-in">
              <keep-alive>
                <component :is="Component" />
              </keep-alive>
            </transition>
          </router-view>
        </el-main>
        
        <el-footer height="40px" class="footer-container">
          <div class="footer-content">
            <span>© 2025 智慧停车管理系统 版权所有</span>
            <span>技术支持: xxx@example.com</span>
          </div>
        </el-footer>
      </el-container>
    </el-container>
  </div>
</template>

<script setup>
import { ref, computed, onMounted, onBeforeUnmount, watch } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import { useStore } from 'vuex'
import { ElMessage, ElMessageBox } from 'element-plus'
import { 
  Fold, Expand, FullScreen, Close, 
  ArrowDown, User, Setting, SwitchButton 
} from '@element-plus/icons-vue'
import Breadcrumb from '../components/Breadcrumb.vue'
import SidebarItem from '../components/SidebarItem.vue'
import AppConfig from '@/config/app'

const store = useStore()
const router = useRouter()
const route = useRoute()

// 侧边栏收起状态
const isCollapse = ref(false)
// 是否全屏
const isFullscreen = ref(false)

// 路由菜单
const routes = computed(() => {
  // 在实际项目中，应根据用户角色过滤路由
  return router.options.routes.filter(route => !route.hidden)
})

// 用户信息
const userInfo = ref({
  id: '',
  username: '',
  realName: '',
  phone: '',
  email: '',
  avatar: '',
  role: ''
})

// 默认头像
const defaultAvatar = AppConfig.defaultAvatar

// 当前激活的菜单
const activeMenu = computed(() => {
  const { path } = route
  return path
})

// 切换侧边栏
const toggleSidebar = () => {
  isCollapse.value = !isCollapse.value
  // 存储到本地，保持状态
  localStorage.setItem('sidebarStatus', isCollapse.value ? '1' : '0')
}

// 切换全屏
const toggleFullScreen = () => {
  if (!document.fullscreenElement) {
    document.documentElement.requestFullscreen()
    isFullscreen.value = true
  } else {
    if (document.exitFullscreen) {
      document.exitFullscreen()
      isFullscreen.value = false
    }
  }
}

// 处理下拉菜单命令
const handleCommand = (command) => {
  switch (command) {
    case 'profile':
      router.push('/user/profile')
      break
    case 'setting':
      router.push('/user/settings')
      break
    case 'logout':
      ElMessageBox.confirm(
        '确定要退出系统吗?',
        '提示',
        {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
        }
      ).then(() => {
        // 退出登录逻辑
        store.dispatch('logout')
        router.push('/login')
        ElMessage.success('退出成功')
      }).catch(() => {})
      break
  }
}

// 跳转至首页
const goToHome = () => {
  router.push('/')
}

// 监听ESC键退出全屏
const handleEscKey = (e) => {
  if (e.key === 'Escape' && isFullscreen.value) {
    isFullscreen.value = false
  }
}

// 监听全屏变化
const handleFullscreenChange = () => {
  isFullscreen.value = !!document.fullscreenElement
}

// 恢复侧边栏状态
onMounted(() => {
  // 从本地存储恢复侧边栏状态
  const sidebarStatus = localStorage.getItem('sidebarStatus')
  isCollapse.value = sidebarStatus === '1'
  
  // 监听全屏变化和ESC键
  document.addEventListener('keydown', handleEscKey)
  document.addEventListener('fullscreenchange', handleFullscreenChange)
})

// 清理事件监听
onBeforeUnmount(() => {
  document.removeEventListener('keydown', handleEscKey)
  document.removeEventListener('fullscreenchange', handleFullscreenChange)
})
</script>

<style scoped>
.main-layout {
  height: 100vh;
  overflow: hidden;
}

.aside-container {
  background-color: #304156;
  transition: width 0.3s;
  overflow: hidden;
}

.logo-container {
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #2b3648;
  cursor: pointer;
  overflow: hidden;
  white-space: nowrap;
}

.logo-img {
  width: 32px;
  height: 32px;
  margin-right: 6px;
}

.logo-text {
  color: #fff;
  font-size: 16px;
  font-weight: bold;
}

.el-menu-vertical:not(.el-menu--collapse) {
  width: 220px;
}

.el-menu-vertical.el-menu--collapse {
  width: 64px;
}

.header-container {
  background-color: #fff;
  box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 15px;
}

.header-left {
  display: flex;
  align-items: center;
}

.toggle-button {
  font-size: 20px;
  cursor: pointer;
  margin-right: 15px;
  color: #5a5e66;
}

.header-right {
  display: flex;
  align-items: center;
}

.header-icon {
  font-size: 18px;
  color: #5a5e66;
  margin-right: 20px;
  cursor: pointer;
}

.avatar-container {
  display: flex;
  align-items: center;
  cursor: pointer;
}

.username {
  margin: 0 5px;
  color: #606266;
}

.main-container {
  padding: 15px;
  background-color: #f0f2f5;
  height: calc(100vh - 100px);
  overflow-y: auto;
}

.footer-container {
  background-color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #606266;
  font-size: 14px;
  border-top: 1px solid #e6e6e6;
}

.footer-content {
  display: flex;
  justify-content: space-between;
  width: 100%;
  padding: 0 20px;
}

/* 路由过渡动画 */
.fade-transform-enter-active,
.fade-transform-leave-active {
  transition: all 0.3s;
}

.fade-transform-enter-from {
  opacity: 0;
  transform: translateX(-20px);
}

.fade-transform-leave-to {
  opacity: 0;
  transform: translateX(20px);
}

/* 响应式布局 */
@media screen and (max-width: 992px) {
  .aside-container {
    position: fixed;
    z-index: 1001;
    height: 100%;
  }
  
  .header-container {
    padding-left: 80px;
  }
}

@media screen and (max-width: 768px) {
  .header-container {
    padding: 0 10px 0 70px;
  }
  
  .username {
    display: none;
  }
  
  .main-container {
    padding: 10px;
  }
  
  .footer-content {
    flex-direction: column;
    align-items: center;
    font-size: 12px;
    gap: 5px;
  }
}

@media screen and (max-width: 576px) {
  .header-icon {
    margin-right: 10px;
  }
  
  .toggle-button {
    margin-right: 10px;
  }
}
</style> 